<template>
    <div class='header'>
        <el-row>
            <el-col :span="12">
                <div class="logo">
                            <div>
                                <img src="../images/logo.png">
                            </div>
                            <div class=''>
                                仲达集团-维修厂管理系统
                            </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class='right'>
                    <ul>
                        <li v-show='isShow'>
                            <router-link  to=''>返回上一页</router-link>
                            <router-link  to=''>返回首页</router-link>
                        </li>
                        <li>
                            <img src="../images/news.png">
                        </li>
                        <li class='border second_level'>
                            <a href="javascript:;">维修厂简称</a>
                            <div class='Subgrade'>
                                <p>
                                    <router-link to=''>资料与账号</router-link>
                                </p>
                                <p>
                                    <router-link to=''>修改密码</router-link>
                                </p>
                                <p>
                                    <router-link to=''>反馈</router-link>
                                </p>
                                <p>
                                    <router-link to=''>退出</router-link>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
  export default{
      name:'header',
      props:['isShow']
  }
</script>
<style lang='scss' scoped rel='stylesheet/scss'>
    .header{
        height: 55px;
        line-height: 55px;
        background:rgba(52,152,233,1);


        .logo:after{
            display: block;
            content: '';
            color: black;
        }
        .logo{
            padding-left: 54px;
            &>div{
                font-size: 16px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                float: left;
                color:rgba(255,255,255,1);
                .img{
                    margin-right: 20px;
                }
                &>img{
                    vertical-align: middle;
                    padding-right: 10px;
                    height: 30px;
                    margin-top: -5px;
                }
            }

        }
        .right{
            .border{
                border-left: 2px solid #fff;
            }
            text-align: right;
             margin-right: 45px;
            &>ul:after{
                display: block;
                content: '';
                clear: both;
            }
            &>ul{
                height: 15px;
                line-height: 15px;
                margin-top: 20px;

                &>li{
                    float: left;
                    padding: 0 10px;
                    text-align: center;
                    color: white;
                    font-size: 14px;
                    &>a{
                        color: white;
                        margin-left: 20px;
                    }
                    img{
                        vertical-align: middle;
                        margin-top: -6px;
                        width: 28px;
                        height: 28px;
                    }
                }
                .second_level{
                    position: relative;
                    &>a{
                      color: white;
                      padding-bottom: 20px;
                    }
                    &>div{
                        position: absolute;
                        width: 100px;
                        color: #545454;
                        font-size: 12px;
                        display: none;
                         left: 0;
                        background: #fff;
                        box-shadow:0px 10px 10px 0px rgba(198,204,211,0.6);
                        margin-top: 20px;
                        &>p{
                            border-bottom: 1px solid #D7E1E6;
                            padding: 10px 0;
                            margin: 0 5px;
                        }
                        &>p:last-child{
                            border: none;
                        }
                    }
                }
                .second_level:hover .Subgrade{
                    display: block;
                }
            }


        }
    }
</style>